<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
    <!-- Loading Bootstrap -->
    <link href="/static/admin/Flat/dist/css/vendor/bootstrap.min.css" rel="stylesheet">
    <!-- Loading Flat UI -->
    <link href="/static/admin/Flat/dist/css/flat-ui.css" rel="stylesheet">
    <link href="/static/admin/Flat/docs/assets/css/demo.css" rel="stylesheet">
    <link rel="shortcut icon" href="/static/admin/Flat/img/favicon.ico">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="dist/js/vendor/html5shiv.js"></script>
    <script src="dist/js/vendor/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<form action="/admin/authgroup" method="post">
    <div class="alert alert-success">添加权限组</div>
    <div class="form-group">
        <label for="title">权限组名称</label>
        <input required id="title" class="form-control" type="text" placeholder="请输入权限名称" name="title">
    </div>

    <div class="form-group">
        <label>权限名 <input type="button" id="allCheck" value="全选"/></label>
        <table class="table table-hover">
            {volist name="ruleDatas" id="ruleData"}
            {empty name="ruleData['_data']"}
            <tr>
                <th>
                    <label class="checkbox checkbox-inline">
                        <input class="custom-checkbox" name="rules[]" type="checkbox" data-toggle="checkbox"
                               value="{$ruleData.id}">
                        <span class="icons">
                    <span class="icon-unchecked"></span>
                    <span class="icon-checked"></span>
                    </span>
                        {$ruleData.title}
                    </label>
                </th>
                <td></td>
            </tr>
            {else /}
            <tr>
                <th>
                    <label class="checkbox checkbox-inline">
                        <input class="custom-checkbox" name="rules[]" type="checkbox" data-toggle="checkbox"
                               value="{$ruleData.id}">
                        <span class="icons">
                    <span class="icon-unchecked"></span>
                    <span class="icon-checked"></span>
                    </span>
                        {$ruleData.title}
                    </label>
                </th>
                <td>
                    {volist name="ruleData['_data']" id="ruleDataChild"}
                    <label class="checkbox checkbox-inline">
                        <input class="custom-checkbox" name="rules[]" type="checkbox" data-toggle="checkbox"
                               value="{$ruleDataChild.id}">
                        <span class="icons">
                        <span class="icon-unchecked"></span>
                        <span class="icon-checked"></span>
                        </span>
                        {$ruleDataChild.title}
                    </label>
                    {/volist}
                </td>
            </tr>
            {/empty}
            {/volist}
        </table>
        <script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.min.js"></script>
        <script language="javascript">
            window.onload = function () {
                var arr = document.getElementsByTagName('input');
                var b = document.getElementById("allCheck");
                var iSelect = true;
                b.onclick = function () {
                    if (iSelect == true) {
                        for (var i = 0; i < arr.length; i++) {
                            arr[i].checked = true;
                        }
                        iSelect = false;
                        b.value = '反选';
                    } else if (iSelect == false) {
                        for (var i = 0; i < arr.length; i++) {
                            arr[i].checked = false;
                        }
                        iSelect = true;
                        b.value = '全选';
                    }
                }
            }
        </script>
        <script>
            $("input[type='checkbox']").on('click', function (event) {
                if ($(this).is(':checked')) {
                    $(this).parents('th').siblings('td').find("input[type='checkbox']").attr("checked", true);
                } else {
                    $(this).parents('th').siblings('td').find("input[type='checkbox']").attr("checked", false);
                }
            });

        </script>
    </div>
    <button class="btn btn-primary btn-block" type="submit">确定</button>
</form>
</body>
</html>
